import styles from './index.module.scss'
import Dialog from '@c/dialog'
import cm from 'classnames'
import dynamic from 'next/dynamic'
import { useState, useEffect } from 'react'
import { getTaskConvertList, convertScore } from '@/api/score'
import message from '@c/message'
import { scorePageConvertReport } from '@/utils/report'

const ModalConvertSuccess = dynamic(() => import('../modal-convert-success'))
const Loading = dynamic(() => import('@c/request-loading'))

const formatDateStr = date => {
  if (date >= 30) {
    return Math.floor(date / 30) + '月VIP'
  }
  return date + '日VIP'
}

const Index = props => {
  const { onClose, score, updateScore } = props
  const [succed, setSucced] = useState(false)

  const [list, setList] = useState(null)
  const getList = async () => {
    const res = await getTaskConvertList()
    setList(res.data || [])
  }

  const convertGoods = async (exchangeId, points_name) => {
    const res = await convertScore({ exchangeId })
    if (res.code === 0) {
      setSucced(true)
      updateScore()
    } else {
      message({ content: res.msg })
    }
    scorePageConvertReport({
      exchange_time: points_name,
      exchange_status: res.code === 0 ? '兑换成功' : '兑换失败'
    })
  }

  useEffect(() => {
    getList()
  }, [])

  return (
    <>
      <Dialog className={cm(styles.content)}>
        <img loading="lazy" alt="关闭" src="/images/close.png" className={styles.close} onClick={onClose} />
        <div className={styles.titleHead}>
          <img alt="头像" src="/images/user.png" className={styles.header} />
          <div className={styles.scoreDetail}>
            <div className={styles.tops}>
              <span className={styles.span1}>我的积分:</span>
              <span className={styles.span2}>{score}</span>
              <img className={styles.corn} src="/images/corn.webp" alt="corn" />
            </div>
          </div>
        </div>
        <div className={styles.mainContent}>
          {list ? (
            list.length ? (
              list.map((item, index) => {
                return (
                  <div key={index} className={styles.mainItem}>
                    <div className={styles.leftScore}>
                      <p className={styles.leftTitle}>
                        <span className={styles.span1}>{formatDateStr(item.duration)}</span>
                        <span className={styles.span2}>会员权益</span>
                      </p>
                      <p className={styles.needCorn}>
                        <img src="/images/corn.webp" alt="corn" />
                        <span>{item.points}</span>
                      </p>
                    </div>
                    <div className={styles.duiBtn} onClick={() => convertGoods(item.id, formatDateStr(item.duration))}>
                      兑换
                    </div>
                  </div>
                )
              })
            ) : null
          ) : (
            <Loading width={20} />
          )}
        </div>
      </Dialog>
      {succed && <ModalConvertSuccess onClose={() => setSucced(false)} />}
    </>
  )
}

export default Index
